import { useState } from 'react';
import { CodeTab, PreviewTab, TabsLayout } from '../../components/common/TabsLayout';
import { Box, Button, Flex } from '@chakra-ui/react';

import Customize from '../../components/common/Preview/Customize';
import PreviewSlider from '../../components/common/Preview/PreviewSlider';
import CodeExample from '../../components/code/CodeExample';

import PropTable from '../../components/common/Preview/PropTable';
import Dependencies from '../../components/code/Dependencies';

import Counter from '../../content/Components/Counter/Counter';
import { counter } from '../../constants/code/Components/counterCode';

const CounterDemo = () => {
  const [value, setValue] = useState(1);
  const [fontSize, setFontSize] = useState(80);
  const [gap, setGap] = useState(10);

  const propData = [
    {
      name: 'value',
      type: 'number',
      default: 'N/A (required)',
      description: 'The numeric value to display in the counter.'
    },
    {
      name: 'fontSize',
      type: 'number',
      default: '100',
      description: 'The base font size used for the counter digits.'
    },
    {
      name: 'padding',
      type: 'number',
      default: '0',
      description: 'Additional padding added to the digit height.'
    },
    {
      name: 'places',
      type: 'number[]',
      default: '[100, 10, 1]',
      description: 'An array of place values to determine which digits to display.'
    },
    {
      name: 'gap',
      type: 'number',
      default: '8',
      description: 'The gap (in pixels) between each digit.'
    },
    {
      name: 'borderRadius',
      type: 'number',
      default: '4',
      description: 'The border radius (in pixels) for the counter container.'
    },
    {
      name: 'horizontalPadding',
      type: 'number',
      default: '8',
      description: 'The horizontal padding (in pixels) for the counter container.'
    },
    {
      name: 'textColor',
      type: 'string',
      default: "'white'",
      description: 'The text color for the counter digits.'
    },
    {
      name: 'fontWeight',
      type: 'string | number',
      default: "'bold'",
      description: 'The font weight of the counter digits.'
    },
    {
      name: 'containerStyle',
      type: 'React.CSSProperties',
      default: '{}',
      description: 'Custom inline styles for the outer container.'
    },
    {
      name: 'counterStyle',
      type: 'React.CSSProperties',
      default: '{}',
      description: 'Custom inline styles for the counter element.'
    },
    {
      name: 'digitStyle',
      type: 'React.CSSProperties',
      default: '{}',
      description: 'Custom inline styles for each digit container.'
    },
    {
      name: 'gradientHeight',
      type: 'number',
      default: '16',
      description: 'The height (in pixels) of the gradient overlays.'
    },
    {
      name: 'gradientFrom',
      type: 'string',
      default: "'black'",
      description: 'The starting color for the gradient overlays.'
    },
    {
      name: 'gradientTo',
      type: 'string',
      default: "'transparent'",
      description: 'The ending color for the gradient overlays.'
    },
    {
      name: 'topGradientStyle',
      type: 'React.CSSProperties',
      default: 'undefined',
      description: 'Custom inline styles for the top gradient overlay.'
    },
    {
      name: 'bottomGradientStyle',
      type: 'React.CSSProperties',
      default: 'undefined',
      description: 'Custom inline styles for the bottom gradient overlay.'
    }
  ];

  return (
    <TabsLayout>
      <PreviewTab>
        <Box position="relative" className="demo-container" h={400} overflow="hidden">
          <Counter
            value={value}
            places={[100, 10, 1]}
            gradientFrom="#060010"
            fontSize={fontSize}
            padding={5}
            gap={gap}
            borderRadius={10}
            horizontalPadding={15}
            textColor="white"
            fontWeight={900}
          />

          <Flex gap={4} bottom="1em" direction={'row'} justify={'center'} mt={4} position="absolute">
            <Button
              bg="#170D27"
              borderRadius="10px"
              border="1px solid #271E37"
              _hover={{ bg: '#271E37' }}
              color="#fff"
              h={10}
              w={10}
              onClick={() => setValue(value - 1)}
            >
              -
            </Button>
            <Button
              bg="#170D27"
              borderRadius="10px"
              border="1px solid #271E37"
              _hover={{ bg: '#271E37' }}
              color="#fff"
              h={10}
              w={10}
              onClick={() => value < 999 && setValue(value + 1)}
            >
              +
            </Button>
          </Flex>
        </Box>

        <Customize>
          <PreviewSlider title="Value" min={0} max={999} step={1} value={value} onChange={val => setValue(val)} />

          <PreviewSlider title="Gap" min={0} max={50} step={10} value={gap} onChange={val => setGap(val)} />

          <PreviewSlider
            title="Font Size"
            min={40}
            max={200}
            step={10}
            value={fontSize}
            onChange={val => setFontSize(val)}
          />
        </Customize>

        <PropTable data={propData} />
        <Dependencies dependencyList={['motion']} />
      </PreviewTab>

      <CodeTab>
        <CodeExample codeObject={counter} />
      </CodeTab>
    </TabsLayout>
  );
};

export default CounterDemo;
